<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prop 校验</title>
    <script src="../public/vue_3.2.36.js"></script>
  </head>
  <body>
    <template id="child">
      <div>
        <p>propA:{{props.propA}}-----propB:{{props.propB}}-----propC:{{props.propC}}-----propD:{{props.propD}}-----propE:{{props.propE}}-----propF:{{props.propF}}-----propG:{{props.propG}}</p>
      </div>
    </template>
    <div id="app">
      <h1>Prop 校验---取代码中查看</h1>
      <Child :prop-a="18" prop-b="xiaoyu" prop-c="yyds" propd="" prop-f="success"></Child>
    </div>
    <script>
      const { createApp, } = Vue;
      const child = {
        template: "#child",
        props: {
          // 基础类型检查
          // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
          propA: Number,
          // 多种可能的类型
          propB: [String, Number],
          // 必传，且为 String 类型
          propC: {
            type: String,
            required: true,
          },
          // Number 类型的默认值
          propD: {
            type: Number,
            default: 100,
          },
          // 对象类型的默认值
          propE: {
            type: Object,
            // 对象或数组的默认值
            // 必须从一个工厂函数返回。
            // 该函数接收组件所接收到的原始 prop 作为参数。
            default(rawProps) {
                console.log(rawProps.propE);//前面没传就是undefined！！！
                console.log(rawProps,"---------------");
              return { message: "hello" };
            },
          },
          // 自定义类型校验函数
          propF: {
            validator(value) {
                console.log(value);
              // The value must match one of these strings
              //下面这里只要返回false就会引起报错！！！！！
              return ["success", "warning", "danger"].includes(value);
            },
          },
          // 函数类型的默认值
          propG: {
            type: Function,
            // 不像对象或数组的默认，这不是一个
            // 工厂函数。这会是一个用来作为默认值的函数
            default() {
              return "Default function";
            },
          },
        },
        setup(props){
            return {
                props
            }
        }
      };
      const app = createApp({
        components: { child },
        setup() {
          return {};
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>
